<script setup>
const route = useRoute();
const { groupName } = route.params;
const { type } = route.query;
console.log(type, "type");

const articleData = ref({});
const activeIndex = ref(type);
// 分组名称查询文章
const { data } = await getFetchData({
  url: "/wx/article/queryArticleListByArticleGroupName",
  opts: {
    expoId: 1074,
    content: "",
    groupName: groupName.replace(type, ""),
    openId: "",
    type: "",
  },
});
async function handleContent(id) {
  const list = data.filter((i) => i.id == id);
  articleData.value = list[0];
  articleData.value.content = articleData.value.content.replace(
    /\<img/gi,
    '<img style="max-width:100%;height:auto;display:block;"'
  );
}
if (data.length) {
  handleContent(data[type].id);
}
const src = ref("");
const link = ref("");
if (groupName.includes("观众观展")) {
  link.value = "/apply/audience";
  src.value =
    "https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/project/1721377645335-1066.jpg?Expires=2036737645&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=16WJqkSnVI2Tb8eMQCWjoOCoNIk%3D";
} else if (groupName.includes("展商中心")) {
  link.value = "/apply/exhibition";
  src.value =
    "https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/project/1721377603952-1607.jpg?Expires=2036737604&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=0iqR1McIKAgKNispVTmvO6eNiGc%3D";
}
</script>

<template>
  <Banner :link="link" :src="src" />
  <div class="main">
    <div class="main-left">
      <div class="main-tit">
        {{ groupName.replace("官网-", "").replace(type, "") }}
      </div>
      <div
        class="main-sub-tit"
        :class="{ active: activeIndex == index }"
        v-for="(item, index) in data"
        @click="handleContent(item.id), (activeIndex = index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="main-right">
      <div class="main-tit active">{{ articleData.title }}</div>
      <div
        v-if="articleData.title.includes('回顾')"
        class="main-content previos-review"
      >
        <div>
          <video
            controls
            src="https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/attachment/1713421687446-1233.mp4?Expires=2028781702&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=yEOWhYuwdUtpkeNlxa0oq2QB9fo%3D"
          ></video>
          <p class="tit">2021中跨展回顾</p>
        </div>
        <div>
          <video
            controls
            src="https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/attachment/1713422799363-1737.mp4?Expires=2028782814&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=xhjpdDooWOnB27fE9Oon4v7z6qU%3D"
          ></video>
          <p class="tit">2022中跨展回顾</p>
        </div>
        <div>
          <video
            controls
            src="https://deface.oss-cn-shenzhen.aliyuncs.com/saas2/attachment/1713423054409-1244.mp4?Expires=2028783066&OSSAccessKeyId=LTAIrDHmhh8UadK6&Signature=j1Z7SyyM8hHObrZNDnvyBFcvilc%3D"
          ></video>
          <p class="tit">2023中跨展回顾</p>
        </div>
      </div>
      <div
        v-else
        class="main-content"
        v-dompurify-html="articleData.content"
      ></div>
    </div>
  </div>
</template>
<style scoped>
/* 栏目列表页 */
.main {
  width: 80%;
  margin: 3.854vw auto;
  display: flex;
  color: rgba(137, 137, 137);
  font-size: 1vw;
}

.main-content {
  line-height: 2;
  max-width: 43.854vw;
  text-align: justify;
  overflow: hidden;
}

.main-content img {
  margin: 0.781vw 0;
  max-width: 100%;
  width: 100%;
}

.main .main-left {
  width: 25%;
  text-align: right;
  padding-right: 5.208vw;
  font-size: 1vw;
}

.main-sub-tit {
  margin-bottom: 0.677vw;
  color: rgba(137, 137, 137);
  cursor: pointer;
}

.main .main-tit {
  color: rgba(16, 16, 16);
  font-size: 1.458vw;
  font-family: SourceHanSansSC-medium;
  margin-bottom: 2vw;
}

.main .main-tit.active {
  color: rgba(255, 100, 0);
  margin-bottom: 1.198vw;
}
.active {
  color: rgba(255, 100, 0);
}
.main-content.previos-review {
  margin-bottom: 2.8vw;
}
.previos-review > div {
  margin-bottom: 15px;
}
.previos-review video {
  width: 100%;
}
.previos-review .tit {
  margin-top: 5px;
}

@media (max-width: 768px) {
  .main {
    width: 90%;
    margin: 4vw auto;
    flex-wrap: wrap;
    font-size: 2.133vw;
  }

  .main .main-left {
    width: 100%;
    padding: 0;
    text-align: left;
    font-size: 2.667vw;
  }

  .main .main-tit {
    font-size: 2.667vw;
  }

  .main-sub-tit {
    display: inline-block;
    margin-right: 2.667vw;
    margin-bottom: 2.667vw;
  }

  .main-content {
    max-width: 100%;
  }

  .main-content img {
    max-width: 90vw;
  }
}
</style>
